<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '0 12px' }">
    <a-table rowKey="id" size="middle" :scroll="scroll" :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="tableChange">
      <a-form slot="title" :form="searchForm" @submit="searchSubmit" layout="inline">
        <a-form-item label="订单编号">
          <a-input allowClear :maxLength="20" autocomplete="off" placeholder="请输入订单编号" v-decorator="['orderNo']" />
        </a-form-item>
        <a-form-item label="下单用户">
          <a-input allowClear :maxLength="8" autocomplete="off" placeholder="请输入下单用户" v-decorator="['userName']" />
        </a-form-item>
        <a-form-item label="用户手机">
          <a-input allowClear :maxLength="11" autocomplete="off" placeholder="请输入手机号" v-decorator="['userPhone']" />
        </a-form-item>
        <a-form-item label="下单商家" v-if="store.id <= 0">
          <a-input allowClear :maxLength="32" autocomplete="off" placeholder="请输入下单商家" v-decorator="['storeName']" />
        </a-form-item>
        <sjht-search-submit hide-reset />
      </a-form>
      <div slot="action" slot-scope="text, record" class="table-action">
        <a-popconfirm v-auth:del :title="`确定删除【${record.orderNo}】吗？`" placement="topRight" @confirm="onDelete(record.id, index)">
          <a class="delete">删除</a>
        </a-popconfirm>
        <!-- <a @click.stop="$refs.recharge.open(r)">删除</a> -->
      </div>
      <span slot="price" slot-scope="text" class="sjht-price" v-if="text >= 0">{{ text }}</span>
      <a-tooltip slot="tip" slot-scope="text" placement="topLeft" class="sjht-cursor" v-if="text" :title="text">{{ text }}</a-tooltip>
      <a-popover slot="product" slot-scope="text" title="商品明细">
        <shop-order-product-list slot="content" :data-source="text" />
        <a>{{ text.length }}</a>
      </a-popover>
    </a-table>
  </a-card>
</template>
<script>
import { mapState } from 'vuex'
import { table, tableMore, tableAction, searchForm } from '../../utils/mixins'
import { PageList, DeleteShopOrder } from '../../api/shop-order'
import { Popover } from 'ant-design-vue'
import ShopOrderProductList from './modules/product-list'

export default {
  name: 'ShopOrderList',
  mixins: [table, tableMore, tableAction, searchForm],
  components: { [Popover.name]: Popover, ShopOrderProductList },
  data() {
    return {
      loadApi: PageList,
      deleteApi: DeleteShopOrder,
      columns: [
        { title: 'ID', dataIndex: 'id', width: 60 },
        { title: '订单编号', dataIndex: 'orderNo', width: 170 },
        { title: '下单用户', dataIndex: 'user.name', width: 80 },
        { title: '用户编号', dataIndex: 'user.code', width: 100 },
        { title: '用户手机', dataIndex: 'user.phone', width: 100 },
        { title: '下单商家', dataIndex: 'store.name', width: 120, ellipsis: true, scopedSlots: { customRender: 'tip' } },
        { title: '商品数量', dataIndex: 'productList', width: 75, align: 'center', scopedSlots: { customRender: 'product' } },
        { title: '订单金额', dataIndex: 'price', width: 75, align: 'center', scopedSlots: { customRender: 'price' } },
        { title: '折扣费用', dataIndex: 'discount', width: 75, align: 'center', scopedSlots: { customRender: 'price' } },
        { title: '订单总价', dataIndex: 'totalPrice', width: 75, align: 'center', scopedSlots: { customRender: 'price' } },
        { title: '支付状态', dataIndex: 'payStatus', width: 80, align: 'center', customRender: t => (t == 1 ? '支付成功' : t == 0 ? '支付中' : t == 2 ? '支付失败' : '未知') },
        { title: '支付方式', dataIndex: 'payMode', width: 80, align: 'center' },
        { title: '支付时间', dataIndex: 'payTime', width: 145 },
        { title: '创建时间', dataIndex: 'createTime', width: 145 },
        { title: '完成时间', dataIndex: 'finishTime', width: 145 }
        // { title: '更新时间', dataIndex: 'updateTime', width: 145 }
      ]
    }
  },
  computed: mapState(['store']),
  created() {
    if (this.store?.id <= 0) {
      this.columns.unshift({ title: '操作', key: 'operation', width: 60, align: 'center', scopedSlots: { customRender: 'action' } })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>